<script setup name="ImageView">
    import { ref, reactive } from 'vue'
    import { useMouseInElement } from '@vueuse/core'

    // 图片列表
    defineProps({
        imageList: {
            type: Array,
            default: () => []
            // default: () => [
            //     "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
            //     "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
            //     "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
            //     "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
            //     "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
            // ]
        }
    })

    const target = ref()
    const { elementX, elementY, isOutside } = useMouseInElement(target)

    const position = reactive({ x: 0, y: 0 })
    const activeIndex = ref(0)

    // 进入小图列表，修改大图索引
    const enterHandler = (i) => {
        activeIndex.value = i
    }

    // 鼠标跟随滑动移动
    const mousemoveHandler = () => {
        // 鼠标的位置-图片的位置-layper一半的宽度，高度同理
        position.x = elementX.value - 100
        position.y = elementY.value - 100

        // 超出边界重置为最大值或最小值
        if (position.x < 0) position.x = 0
        if (position.x > 200) position.x = 200

        if (position.y < 0) position.y = 0
        if (position.y > 200) position.y = 200
    }

</script>


<template>
    <div class="goods-image">

        <!-- 左侧大图-->
        <div class="middle" ref="target" @mousemove="mousemoveHandler">
            <img :src="imageList[activeIndex]" alt="" />
            <!-- 蒙层小滑块 -->
            <div class="layer" :style="{ left: `${position.x}px`, top: `${position.y}px` }"></div>
        </div>
        <!-- 小图列表 -->
        <ul class="small">
            <li v-for="(img, i) in imageList" :key="i" @mouseenter="enterHandler(i)"
                :class="{ active: activeIndex === i }">
                <img :src="img" alt="" />
            </li>
        </ul>
        <!-- 放大镜大图 -->
        <div class="large" :style="[
            {
                backgroundImage: `url(${imageList[activeIndex]})`,
                backgroundPositionX: `${-position.x}px`,
                backgroundPositionY: `${-position.y}px`,
            },
        ]" v-show="!isOutside"></div>
    </div>
</template>

<style scoped lang="scss">
    .goods-image {
        width: 480px;
        height: 400px;
        position: relative;
        display: flex;

        .middle {
            width: 400px;
            height: 400px;
            background: #f5f5f5;
        }

        .large {
            position: absolute;
            top: 0;
            left: 412px;
            width: 400px;
            height: 400px;
            z-index: 500;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-repeat: no-repeat;
            // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
            background-size: 800px 800px;
            background-color: #f8f8f8;
        }

        .layer {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.2);
            // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
            left: 0;
            top: 0;
            position: absolute;
        }

        .small {
            width: 80px;

            li {
                width: 68px;
                height: 68px;
                margin-left: 12px;
                margin-bottom: 15px;
                cursor: pointer;

                &:hover,
                &.active {
                    border: 2px solid $xtxColor;
                }
            }
        }
    }
</style>